<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			//jquery 对象 VS dom对象
			//jq->dom  get(index) [index]
			//dom->jq   $(dom)
			$(function(){
				let d=document.getElementById("article");
				$(d).text("你好");
				
				$("#b1").click(function(){
					let d=$("h1")[2];
					d.innerHTML="你好，我是渣渣灰";
				});
				$("#b2").click(function(){
					let d=$("h1");
					d.each(function(j,i){
						console.log(i,j);
						//i是对象，j是下标，i是dom对象
						$(i).text("这是第 "+(j+1)+"个h1");
						if(j>=4)
						  return false;
					});
				});
				$("a").click(function(){
					alert("你点击了开源中国");
					return false;
				});
			});
		</script>
	</head>
	<body>
		<a href="https://www.oschina.net">淘宝</a>
		<h1 style="display:block;" id="article">44444</h1>
		<h1>11111</h1>
		<h1>11111</h1>
		<h1>11111</h1>
		<h1>11111</h1>
		<h1>11111</h1>
		<h1>11111</h1>
		<button id="b1">修改第三个h1</button>
		<button id="b2">自己循环</button>
	</body>
</html>